// @import url(./mixin.less);
@bgColor: #fff;
@lightbgActive: #fff;
@baseSize: 12px;
@baseHeight: 10px;

.bgTransition {
  transition: background 0.8s ease-in;
}

.bgSize() {
  background-size: 100% 100%;
  width: @baseSize;
  .bgTransition();
}
.mz-panel.light {
  .title {
    // background: #000 linear-gradient(0deg, rgba(0, 140, 248, 0.75) 0%, rgba(121, 197, 255, 0.75) 100%);
    // background-clip: text;
    // color: transparent;
  }

  .mz-panel-bg.no-rem {
    .top.no-rem {
      align-items: flex-end;
      height: @baseHeight;

      .left {
        background: url(../images/top-l.png) top left no-repeat;
        background-size: auto 100%;
        width: @baseSize;
        // .bgTransition();
      }

      .center {
        background: url(../images/top.png) repeat-x;
        background-size: auto 100%;
        flex: 1;
        // .bgTransition();
      }

      .right {
        background: url(../images/top-r.png) top left no-repeat;
        .bgSize();
      }
    }

    .center.no-rem {
      align-items: flex-end;
      flex: 1;

      .left {
        background: url(../images/left.png) top left repeat-y;
        .bgSize();
      }

      .center {
        // .bgTransition();
        background: @bgColor;
        opacity: 0.9;
        flex: 1;
      }

      .right {
        background: url(../images/right.png) top left repeat-y;
        .bgSize();
      }
    }

    .bottom.no-rem {
      height: @baseHeight;
      align-items: stretch;

      .left {
        background: url(../images/bottom-l.png) bottom left;
        .bgSize();
      }

      .center {
        background: url(../images/bottom.png) repeat-x;
        background-size: auto 100%;
        flex: 1;
        // .bgTransition();
      }

      .right {
        background-color: @bgColor;
        background: url(../images/bottom-r.png) bottom left no-repeat;
        .bgSize();
      }
    }
  }

  &:hover,
  &.active {
    // .top {
    //     .topCss('dark', '-active')
    // }

    // .center {
    //     .centerCss('dark', '-active', @darkbgActive)
    // }

    // .bottom {
    //     .bottomCss('dark', '-active')
    // }
  }
}
